<template>
  <div class="model-settings-sidebar">
    <!-- 面板内容 -->
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="text-lg font-semibold text-gray-900">模型设置</h3>
      </div>

      <div class="panel-body">
        <ModelSettingsContent
          :selectedModel="selectedModel"
          :parameters="parameters"
          :availableModels="availableModels"
          @update:selectedModel="$emit('update:selectedModel', $event)"
          @update:parameters="$emit('update:parameters', $event)"
          @reset="$emit('reset')"
          @save="$emit('save')"
          @test="$emit('test')" />
      </div>
    </div>
  </div>
</template>

<script setup>
import ModelSettingsContent from "./ModelSettingsContent.vue";

const props = defineProps({
  selectedModel: {
    type: String,
    default: "yolov8",
  },
  parameters: {
    type: Object,
    default: () => ({
      confidenceThreshold: 0.5,
      nmsThreshold: 0.4,
      inputSize: "608",
      batchSize: "4",
      enableGPU: true,
      enablePreprocessing: true,
      enablePostprocessing: true,
    }),
  },
  availableModels: {
    type: Array,
    default: () => [
      {
        id: "yolov8",
        name: "YOLOv8",
        description: "最新的YOLO模型，平衡精度和速度",
        icon: "🚀",
        accuracy: 95,
        speed: "快",
        size: "6.2MB",
      },
      {
        id: "yolov5",
        name: "YOLOv5",
        description: "经典YOLO模型，稳定可靠",
        icon: "⚡",
        accuracy: 92,
        speed: "很快",
        size: "4.1MB",
      },
      {
        id: "efficientdet",
        name: "EfficientDet",
        description: "高效检测模型，适合移动端",
        icon: "📱",
        accuracy: 90,
        speed: "极快",
        size: "2.8MB",
      },
      {
        id: "fasterrcnn",
        name: "Faster R-CNN",
        description: "高精度检测模型，适合高要求场景",
        icon: "🎯",
        accuracy: 98,
        speed: "慢",
        size: "15.6MB",
      },
    ],
  },
});

const emit = defineEmits(["update:selectedModel", "update:parameters", "reset", "save", "test"]);
</script>

<style lang="scss">
.model-settings-sidebar {
  width: 300px;
  background: white;
  border-left: 1px solid #e5e7eb;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: white;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
</style>
